<template>
    <div class="destination-com">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="热门推荐" name="first" :key="new Date().getTime()">
                <recommend></recommend>
            </el-tab-pane>
            <el-tab-pane label="分组推荐" name="second" :key="new Date().getTime() + 1">
                <group></group>
            </el-tab-pane>
            <el-tab-pane label="国家推荐" name="third" :key="new Date().getTime() + 2">
                <country></country>
            </el-tab-pane>
            <el-tab-pane label="目的地推荐" name="fourth" :key="new Date().getTime() + 3">
                <destination-page></destination-page>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>

    import Recommend from './component/recommend.vue';
    import Group from './component/group.vue';
    import Country from './component/country.vue';
    import DestinationPage from './component/destinationPage.vue';
    import {fetchAllResourceList} from '@/api/app';

    const defaultListQuery = {
      pageNum: 1,
      pageSize: 10,
      sysAccount: null,
      userStatus: null,
    };
    export default {
        components: {
            Recommend,
            Group,
            Country,
            DestinationPage,
        },
        data () {
            return {
                listQuery: Object.assign({}, defaultListQuery),
                activeName: 'first',
                btnMenu: {
                    edit: true,
                    delete: true,
                },
            }
        },
        created() {
            const menu = JSON.parse(localStorage.getItem('listMenu'));
            const item = menu.filter(item => item.title === '目的地推荐')[0];
            fetchAllResourceList({menuId: item.id }).then(res => {
                res.data.forEach(dom => {
                if (dom.component === '' && dom.name === '后台角色管理') {
                    this.btnMenu.edit = false;
                }
                if (dom.component === '' && dom.name === '后台角色删除') {
                    this.btnMenu.delete = false;
                }
                });
            });
        },
        methods: {


            handleClick(tab, event) {
                // console.log(tab, event, this.activeName);
                // switch(this.activeName) {
                //     case 'first':
                //         this.firstList();
                //         break;
                //     case 'second':
                //         this.secondList();
                //         break;
                //     case 'third':
                //         this.thirdList();
                //         break;
                //     case 'fourth':
                //         this.fourthList();
                //         break;
                //     default:
                //         break;
                // }
            },

        },
    }
</script>

<style lang="scss" scoped>
.destination-com {
    margin: 20px;
    .btn-list {
        cursor: pointer;
    }
}
</style>
